﻿@{
    ViewBag.Title = "新增管家";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>@ViewBag.Title</small></div>
    </div>

    <div class="am-tabs am-margin" data-am-tabs>

        <div class="am-tabs-bd">
            <form action="" onsubmit="return check()" method="post" class="am-form" id="doc-vld-msg">
                <fieldset>
                    <div class="am-form-group">
                        <label for="oatNo">工号：</label>
                        <input type="text" id="oatNo" placeholder="请输入工号(必填)" required v-model="oatNo" />
                    </div>
                    <div class="am-form-group">
                        <label for="AuntName">管家名字：</label>
                        <input type="text" id="AuntName" placeholder="请输入名字(必填)" required v-model="AuntName" />
                    </div>
                    <div class="am-form-group">
                        <label for="IDNo">管家身份证：</label>
                        <input type="text" id="IDNo" placeholder="请输入身份证(非必填)" required v-model="IDNo" />
                    </div>
                    <div class="am-form-group">
                        <label for="AuntDesc">管家介绍：</label>
                        <input type="text" id="AuntDesc" placeholder="请输入管家介绍(非必填)"  v-model="AuntDesc" />
                    </div>
                    <div class="am-form-group">
                        <label for="AuntPhone">管家手机号码：</label>
                        <input type="text" id="AuntPhone" placeholder="请输入管家手机号码(必填)" required v-model="AuntPhone" />
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>头像</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="imgUrl == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        <img id="imgImgUrl" v-bind:src="imgUrl" width="60px" height="60px" v-if="imgUrl != ''" />
                        <input id="txtImgUrl" type="file">
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>健康证</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="HealthImg == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        <img id="imgHealthImg" v-bind:src="HealthImg" width="60px" height="60px" v-if="HealthImg != ''" />
                        <input id="txtHealthImg" type="file">
                    </div>
                    <input type="hidden" name="data" v-bind:value="data" />
                    <button v-bind:click="test()" class="am-btn am-btn-secondary" type="submit">提交</button>

                </fieldset>
            </form>
        </div>
    </div>
</div>

@section Scripts{

    <script>
        var model = new Vue({
            el: '#app',
            data: {
                AuntName: '',
                AuntDesc: '',
                AuntPhone: '',
                imgUrl: '',
                oatNo: '',
                IDNo: '',
                HealthImg: '',
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods: {
                previewImgUrl: function (e) {
                    var self = this;
                    var file = e.delegateTarget.files[0];
                    //在此可以对选择的文件进行判断:文件类型 文件大小等
                    //.....

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (ret) {
                        picBase64 = reader.result
                        //预览图片
                        $("#imgImgUrl").attr({ "src": picBase64 });

                        self.imgUrl = picBase64;
                    }
                },
                previewHealthImgUrl: function (e) {
                    var self = this;
                    var file = e.delegateTarget.files[0];
                    //在此可以对选择的文件进行判断:文件类型 文件大小等
                    //.....

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (ret) {
                        picBase64 = reader.result
                        //预览图片
                        $("#imgHealthImg").attr({ "src": picBase64 });

                        self.HealthImg = picBase64;
                    }
                }

            }

        })
        $('.admin-sidebar-Aunt').addClass('current');

        var $txtImgUrl = $('#txtImgUrl');
        $txtImgUrl.change(model.previewImgUrl);

        var $txtHealthImg = $('#txtHealthImg');
        $txtHealthImg.change(model.previewHealthImgUrl);


    </script>
}